﻿<link href='https://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>

<style>
* {
    font-family: 'Cutive Mono'!important;
    font-size: 20px;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}

input {
    -webkit-user-select:initial;
}

body, html { 
    padding: 0;
    overflow-x: hidden;
}

hr {
    border:0;
    border-bottom: solid lightgray 1px;
    margin: 0 -18px;
}

label, input {
    vertical-align: middle;
}

label, input[type=checkbox], input[type=radio] {
    cursor: pointer;
}

input[type=radio] {
    vertical-align: baseline;
    width: 50px;
    margin-left: -15px;
}

select {
    border: 1px solid black;
    padding: 0;
    outline:none!important;
    border: 1px solid black !important;
}

option {
    background: white;
    color: black;
    text-shadow: none;
    outline:none!important;
    padding: 2px 5px;
    border-bottom: 1px solid black;
}

option:last-child {
    border-bottom: 0;
}

input[disabled], label[disabled], button[disabled] {
    cursor: not-allowed!important;
    color: #bfbfbf!important;
}

blockquote {
    font-size: 16px;
    border: 1px solid #318db9;
    color: #318db9;
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: -1px -1px 5px 0px rgba(46, 128, 146, 0.75);
}

h1 {
    color: #EC008C;
    font-size: 30px;
}

h2, strong {
    color: #38a8e0;
}

h2 {
    display: inline-block;
    vertical-align: middle; 
}

select {
    vertical-align: middle;
    margin-top: 15px;
}

#applying-changes {
    background: yellow;
    position: fixed;
    top: -24px;
    left: 0px;
    right: 0px;
    width: 100%;
    text-align: center;
    color: green;
    font-weight: bold;
    display: none;
    font-size: 24px !important;
    padding: 9px 0;
    border-bottom: 1px solid;
}

label:hover {
    background: yellow;
}
</style>

<p id="applying-changes">Applying Changes...</p>

<h1>Options (enable microphone, select codecs etc.)</h1>

<h2>Enable?</h2>

<label><input type="checkbox" id="enableMicrophone"> Include microphone?</label>
<label><input type="checkbox" id="enableCamera"> Include camera?</label>
<label><input type="checkbox" id="enableTabCaptureAPI"> Record selected tab only?</label>
<label><input type="checkbox" id="enableTabAudio"> Choose any tab (only tabs)?</label>

<hr>

<h2>Video Codecs:</h2>
<div id="videoCodec" style="display: inline-block;">
    <label><input type="radio" checked>Default</label>
    <label><input type="radio">VP8</label>
    <label><input type="radio">VP9</label>
    <label><input type="radio">H264</label>
    <label><input type="radio">MKV</label>
</div>

<hr>

<br>

<h2>Songs (mp3/ogg/wav):</h2>

<label><input type="checkbox" id="enableMp3"> Play mp3/ogg audio in the background?</label>

<br>
<input type="file" id="choose-mp3-audio" disabled accept="audio/*">
<span id="mp3-file-name" style="color: #38a8e0;"></span>

<br><br>
<hr>

<h2>Select Resolutions:</h2>
<select id="resolutions" size=5>
    <option selected>Default (29999x8640)</option>
    <option>4K UHD (3840x2160)</option>
    <option>WQXGA (2560x1600)</option>
    <option>WQHD (2560x1440)</option>
    <option>WUXGA (1920x1200)</option>
    <option>Full HD (1920x1080)</option>
    <option>WSXGA+ (1680x1050)</option>
    <option>UXGA (1600x1200)</option>
    <option>HD+ (1600x900)</option>
    <option>WXGA+ (1440x900)</option>
    <option>HD (1366x768)</option>
    <option>HD (1360x768)</option>
    <option>SXGA (1280x1024)</option>
    <option>WXGA (1280x800)</option>
    <option>WXGA (1280x768)</option>
    <option>WXGA (1280x720)</option>
    <option>XGA+ (1152x864)</option>
    <option>XGA (1024x768)</option>
    <option>WSVGA (1024x600)</option>
    <option>SVGA (800x600)</option>
    <option>720p (1280x720)</option>
    <option>360p (640x360)</option>
</select>

<br><br>

<hr>

<h2>Video Framerates:</h2>
<select id="videoMaxFrameRates" size=4>
    <option selected>None</option>
    <option>30</option>
    <option>25</option>
    <option>15</option>
</select>

<br><br>

<hr>
<br>

<h2>Bit rates:</h2>

<select id="bitsPerSecond" size=5>
    <option value="default" selected>Default bitrates</option>
    <option value="8000000000">1 GB bps</option>
    <option value="800000000">100 MB bps</option>
    <option value="8000000">1 MB bps</option>
    <option value="800000">100 KB bps</option>
    <option value="8000">1 KB bps</option>
    <option value="800">100 Bytes bps</option>
</select>

<br><br>

<script src="RecordRTC.min.js"></script>
<script src="options.js"></script>
